<template>
  <div class="execution">
    <basic-container>
      <el-container>
        <el-aside width="200px">
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"></avue-tree>
        </el-aside>
        <el-main>
          <avue-crud ref="crud"
                     :page.sync="page"
                     :data="tableData"
                     :permission="permissionList"
                     :table-loading="tableLoading"
                     :option="tableOption"
                     @on-load="getList"
                     @refresh-change="refreshChange"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     @row-update="handleUpdate"
                     @row-save="handleSave"
                     @row-del="rowDel">
            <template slot="icon" slot-scope="scope">
              <i :class="scope.row.icon" style="font-size:24px"></i>
            </template>
          </avue-crud>
        </el-main>
      </el-container>
    </basic-container>
  </div>
</template>

<script>
import {fetchCidTree} from "@/api/category";
import {putObj} from "@/api/attrgroup";
import request from "@/router/axios";
import {mapGetters} from "vuex";
import {tableOption, treeOption} from "@/const/crud/attrgroup";

export default {
  name: "attrgroup",
  data() {
    return {
      catId: 0,
      tableLoading: false,
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      treeOption: treeOption,
      treeData: [],
      tableOption: tableOption,
      tableData: [],
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.product_attrgroup_add, false),
        delBtn: this.vaildData(this.permissions.product_attrgroup_del, false),
        editBtn: this.vaildData(this.permissions.product_attrgroup_edit, false)
      };
    }
  },
  created() {
    fetchCidTree(3).then(res => {
      this.treeData = res.data.data;
      this.tableOption.column[4].dicData = res.data.data;
    });
  },
  methods: {
    getList(page) {
      this.tableLoading = true
      const catId = this.catId
      request({
        url: `/product/attrgroup/list/${catId}`,
        method: 'get',
        params: Object.assign({
          current: page.currentPage,
          size: page.pageSize,
        })
      }).then(response => {
        this.tableData = response.data.data.list;
        this.page.total = response.data.data.totalCount
        if (response.data.data.totalCount === 0) {
          this.$message.warning('当前分类下无数据！');
        }
      }).catch(error => {
        this.$message.error(error);
        this.tableData = [];
        this.page.total = 0;
      }).finally(() => {
        this.tableLoading = false
      });
    },
    nodeClick(data) {
      if (data.level === 3) {
        this.catId = data.value;
        this.getList(this.page);
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.catId = 0;
      this.getList(this.page)
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    handleSave(row, done, loading) {
      return request({
        url: '/product/attrgroup',
        method: 'post',
        data: row
      }).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除【' + row.attrGroupName + '】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.attrGroupId)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    search() {

    }
  }
}
</script>

<style scoped>

</style>
